<template>
  <div class="main-container container-limited container-fluid">
    <issues-breadcrumb />
    <div class="page-title-holder no-border-bottom">
      <h2 class="page-title">创建问题</h2>
    </div>
    <el-form ref="form" label-position="top" class="bold-label" :model="form" :rules="rules">
      <el-form-item ref="title" label="问题标题" prop="title">
        <title-search :title.sync="form.title" class="full" />
      </el-form-item>
      <el-form-item ref="content" label="问题描述" prop="content">
        <tinymce-editor v-model="form.content" />
<!--        <el-input v-show="false" v-model="form.content" />-->
<!--        <ckeditor :content.sync="form.content" class="h-issue-create" />-->
      </el-form-item>
<!--      <el-divider />-->
<!--      <el-form-item label="特别提醒">-->
<!--        <user-select :selected-users.sync="form.selectedUsers" />-->
<!--      </el-form-item>-->
      <el-form-item label="添加标签">
        <tag-select :selected-tags.sync="form.tags" />
      </el-form-item>
      <el-form-item>
        <div class="submit-button-deep">
          <el-button type="primary" @click="onSubmit" :loading="loading">发布问题</el-button>
          <el-button class="right" @click="goBack">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import IssuesBreadcrumb from '@/views/issues/components/breadcrumb';
import UserSelect from '@/components/shared/UserSelect';
import TagSelect from '@/components/shared/TagSelect';
import TitleSearch from './title-search';

export default {
  name: 'IssuesCreate', // 创建问题页面
  components: { IssuesBreadcrumb, TitleSearch, UserSelect, TagSelect },
  data() {
    return {
      form: {
        title: '', // 问题标题
        content: '', // 问题描述
        selectedUsers: [], // 特别提醒的用户
        tags: [], // 问题标签
      },
      rules: {
        title: [{ required: true, validator: this.$va.issueTitle }],
        content: [{ required: true, validator: this.$va.content }],
      },
      loading: false, // 正在创建
    };
  },
  computed: {
    spaceId() { return this.$route.params.spaceId; },
  },
  methods: {
    // 创建问题
    onSubmit() {
      this.$refs.form.validate((valid, errs) => {
        if (valid) {
          this.loading = true;
          this.$api.spaceIssues.create({
            spaceId: this.spaceId,
            title: this.form.title,
            content: this.form.content,
            remindersId: this.form.selectedUsers,
            tags: this.form.tags,
          }).then((res) => {
            this.$root.$emit('loadSidebarItemsCount');
            this.$message.success('创建成功');
            this.$router.push(`/spaces/${this.spaceId}/issues/${res.data.id}`);
          }).catch(() => {})
            .then(() => { this.loading = false; });
        } else this.$refs[Object.keys(errs)[0]].$el.scrollIntoView({ block: 'center' });
      });
    },
  },
};
</script>

<style></style>
